<template>
  <div>
    <div class="marquee">
      <div class="marquee_title">
        <img src="../img/rall.png" alt />
      </div>
      <div class="marquee_box">
        <ul class="marquee_list" :class="{marquee_top:animate}">
          <li v-for="(item,index) in marqueeList" :key="index">{{item.name}}</li>
        </ul>
      </div>
    </div>
    <div class="cons">
      <p>免费注册莱州信息网网站会员,可自己修改/删除信息</p>
    </div>
    <div class="tu">
      <img src="../img/1.jpg" alt />
    </div>
    <img src="../img/2.jpg" alt class="pian" />
    <div class="hang">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>二手市场</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <div class="fen">
      <ul>
        <span>分类</span>
        <li @click="cur=0" :class="{active:cur==0}">不限</li>
        <li @click="cur=1" :class="{active:cur==1}" v-for="items in list" :key="items.name">{{items.name}}</li>
        <li @click="cur=2" :class="{active:cur==2}">手机通讯</li>
        <li @click="shi">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </li>
      </ul>
      <ol class="ol" v-show="xian">
        <li @click="cur=3" :class="{active:cur==3}">家用电器</li>
        <li @click="cur=4" :class="{active:cur==4}">数码产品</li>
        <li @click="cur=5" :class="{active:cur==5}">办公用品</li>
      </ol>
    </div>-->
    <div class="type">
      <ul>
        <li>
          <span>分类</span>
        </li>
        <li @click="cur=0" :class="{active:cur==0}">
          <span>不限</span>
        </li>
        <li
          v-for="(items,i) in list"
          @click="cur=i+1"
          :key="items.name"
          :class="{active:cur==(i+1)}"
        >
          <span>{{items.name}}</span>
        </li>
      </ul>
      <div>
        <span @click="shi()" class="el-dropdown-link">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </div>
    </div>
    <div class="fen">
      <ul>
        <span>地区</span>
        <li @click="index=0" :class="{active:index==0}">不限</li>
        <li @click="index=1" :class="{active:index==1}">文昌路</li>
        <li @click="index=2" :class="{active:index==2}">永安路</li>
        <li @click="index=3" :class="{active:index==3}">文峰路</li>
        <li @click="zhan">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </li>
      </ul>
      <ol class="ol" v-show="show">
        <li @click="index=4" :class="{active:index==4}">城港路</li>
        <li @click="index=5" :class="{active:index==5}">其他</li>
      </ol>
    </div>
    <div class="last" @click="go(items)" v-for="(items,index) in item" :key="index">
      <ul>
        <li>
          <img src="../img/6.jpeg" alt />
        </li>
        <li>
          <div>
            <p>{{items.title}}</p>
            <ol>
              <li>
                <span class="yuan">8800</span>
                <span class="chengzi">{{items.linkman}}</span>
                <span class="lvzi">{{items.date}}</span>
                <span>阅15</span>
              </li>
            </ol>
          </div>
        </li>
      </ul>
    </div>
    <div class="page">
      <el-pagination background layout="prev, pager, next" :total="50"></el-pagination>
    </div>
    <div class="footer">
      <a href="#" class="one">
        <i>
          <img src="../img/shan.png" alt />
        </i>
        <span style="margin-left:3px">删除电话被冒用的信息</span>
      </a>
      <a href="#" class="two">
        <i>
          <img src="../img/letter.png" alt />
        </i>
        <span class="lian">联系我们</span>
      </a>
    </div>
    <div class="foot">
      <ul>
        <li style="color: #5F6880;">手机版</li>
        <li>电脑版</li>
        <li>莱州论坛客户端</li>
      </ul>
      <p>联系电话：0535-2892666</p>
      <ul style="padding-bottom:10px">
        <li>莱州信息网</li>
        <li>站长统计</li>
      </ul>
      <p>法律顾问:山东生活帮律师事务所</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      cur: 0,
      index: 0,
      item: [],
      arr: [],
      show: false,
      xian: false,
      animate: false,
      list: [],
      area: "文昌路",
      marqueeList: [
        {
          name: "即日起莱州信息网发布信息需要实名认证"
        },
        {
          name: "免费注册会员用户可以修改/删除信息"
        }
      ]
    };
  },
  created: function() {
    setInterval(this.showMarquee, 3000);
  },
  mounted() {
    this.getData();
    this.arr = JSON.parse(localStorage.getItem("zxwx-")); //一级菜单的2级菜单的某一项
    this.list = JSON.parse(localStorage.getItem("daohang-")); //所有的2级菜单
  },
  methods: {
    showMarquee: function() {
      this.animate = true;
      setTimeout(() => {
        this.marqueeList.push(this.marqueeList[0]);
        this.marqueeList.shift();
        this.animate = false;
      }, 500);
    },
    getData() {
      axios({
        url: "http://localhost/api.php/zydata",
        method: "get",
        params: {
          transform: 1,
          order: "id"
        }
      }).then(res => {
        this.item = res.data.zydata;
        var shu = this.item.filter(data => {
          return data.type == this.arr.id;
        });
        this.item = shu;
      });
    },
    shi() {
      this.xian = !this.xian;
    },
    zhan() {
      this.show = !this.show;
    },
    go(item) {
      this.$router.push({ name: "Detail2", params: { item } });
    }
  }
};
</script>

<style scoped>
.type div {
  right: 11px;
  position: absolute;
  top: 5px;
}
.type ul {
  width: 93%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 38px;
  overflow: hidden;
  align-items: center;
  font-size: 14px;
}
.type {
  background: #fff;
  border-bottom: 1px solid #d8d9da;
  position: relative;
}
.type ul li {
  margin: 8px 0;
  padding: 0 5px;
  text-align: center;
}
.type ul li span.active {
  background: #ff6c00;
  color: #fff;
  height: 18px;
  line-height: 18px;
}
.type ul li.active {
  background: #ff6c00;
  color: #fff;
  height: 18px;
  line-height: 18px;
}
.marquee {
  width: 100%;
  height: 40px;
  align-items: center;
  color: #3a3a3a;
  background-color: white;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.marquee_title {
  padding: 0 10px;
  height: 21px;
  font-size: 14px;
  align-items: center;
}
.marquee_title img {
  width: 20px;
  height: 16px;
}
.marquee_box {
  display: block;
  position: relative;
  width: 100%;
  height: 30px;
  overflow: hidden;
}
.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.marquee_top {
  transition: all 0.5s;
  margin-top: -30px;
}
.marquee_list li {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding-left: 4px;
  color: rgb(255, 0, 0);
}
.page {
  background: #fff;
  border-top: 1px solid #e0e1e2;
  font-size: 14px;
  padding: 25px 0;
  text-align: center;
}
.foot ul {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.foot {
  margin-bottom: 36px;
  font-size: 12px;
  color: #999;
  text-align: center;
}
.foot p {
  padding-bottom: 20px;
}
.foot ul li {
  padding: 0 6px;
}
.footer a i {
  height: 100%;
  position: relative;
}
.footer i img {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 1px;
  left: -15px;
}
.footer a .lian {
  margin-left: 5px;
}
.footer a {
  text-align: center;
  background: #fff;
  border: 1px solid #dcdee0;
  color: #5f6880;
  display: inline-block;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
}
.footer a {
  background: #fff;
}
.footer .one {
  width: 190px;
}
.footer .two {
  width: 96px;
  padding: 0 5px;
}
.footer {
  display: flex;
  padding: 15px 10px;
  justify-content: center;
}
.last ul {
  display: flex;
  background: #fff;
  border: 1px solid #eee;
}
.last ul .yuan {
  color: #ff7201;
  font-size: 15px;
  font-weight: bold;
}
.last ul li {
  padding: 10px;
}
.last div p {
  margin-bottom: 30px;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  font-size: 16px;
}
.last ol li {
  padding: 0;
}
.last ol li span {
  color: #9fa2a9;
  font-size: 11px;
}
.last ul li img {
  height: 65px;
  width: 80px;
  padding: 4px;
}
.fen ul,
.ol {
  display: flex;
  height: 32px;
  font-size: 14px;
  justify-content: space-around;
  align-items: center;
  background: #fff;
}
.fen ol {
  justify-content: center;
}
.fen ul li,
.fen .ol li {
  padding: 0 5px;
}
.fen ul li.active,
.fen ol li.active {
  background: #ff6c00;
  color: #fff;
}
.fen .hang,
.el-breadcrumb {
  height: 32px;
  font-size: 14px;
  color: #7c7c7c;
  border-bottom: 1px solid #d8d9da;
  line-height: 32px;
  text-indent: 5px;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #7c7c7c;
  font-weight: normal;
}
.el-breadcrumb__item span {
  padding: 5px 5px 3px 5px;
}
.pian {
  width: 100%;
  margin: 1px 0;
}
.tu img {
  width: 100%;
  height: auto;
}
.tu {
  margin-bottom: 5px;
}
.cons p {
  color: #ffff00;
  font-size: 14px;
}
.cons {
  margin-bottom: 5px;
  background: #ff0000;
  height: 41px;
  padding: 0 8px;
  text-align: center;
}
</style>
